<!--
Date: 2025-08-13
Copyright (c) 2025 Industrial Software Feature Database
-->
<template>
  <codemirror
    v-model="props.code"
    placeholder="Code goes here..."
    :style="{ minHeight: '400px', width: props.width + 'px', border: '1px solid #ccc' }"
    :autofocus="false"
    :tabSize="2"
    :disabled="props.disabled"
    :extensions="extensions"
    @change="codeChange"
  />
</template>

<script setup>
import { Codemirror } from "vue-codemirror";
import { python } from "@codemirror/lang-python";
import { oneDark } from "@codemirror/theme-one-dark";
import { ref } from "vue";
import { EditorView } from "@codemirror/view";
const props = defineProps(['code', 'height', 'width', 'disabled']);
const emit = defineEmits(['transferCode']);
let myTheme = EditorView.theme({
  "&": { color: "#0052D9", backgroundColor: "#FFFFFF" },
  ".cm-content": { caretColor: "#0052D9" },
  ".cm-activeLine": { backgroundColor: "#FAFAFA" },
  ".cm-activeLineGutter": { backgroundColor: "#FAFAFA" },
  "&.cm-focused .cm-cursor": { borderLeftColor: "#0052D9" },
  "&.cm-focused .cm-selectionBackground, ::selection": {
    backgroundColor: "#0052D9",
    color: "#FFFFFF"
  },
  ".cm-gutters": { backgroundColor: "#FFFFFF", color: "#ddd", border: "none" }
}, { dark: true });

// const props = withDefaults(defineProps<IProps>(), { height: '400px' });
// const code = ref('');
const extensions = [python(), oneDark];

const codeChange = (val) => {
  // 可以在这里添加代码变化时的处理逻辑
  emit('transferCode', val);
};
</script>

<style scoped>
/* 可以在这里添加组件的样式 */
</style>
